<!DOCTYPE html>
<html>
    <head>    
        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--标准的视口设置-->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS integrity:防止CDN篡改Javascript; crossorigin:告诉浏览器执行href的而不发送用户凭证;-->
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <!--script src= "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script-->
        <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="https://cdn.staticfile.org/vue/2.2.6/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.4.0/vue-resource.js"></script>


        <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/highcharts-3d.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

        <style type="text/css">
            .left,.right{float:left;width:50%}
        </style>  
    </head>
    <body>
        <div class="container" id="app">
                <div class="container">
                        <nav class="navbar navbar-expand-sm navbar-light bg-light">
                            <a class="navbar-brand">
                                <img src="ubomaker.ico" width="30" height="30" class="d-inline-block align-top">
                                情绪报告
                            </a>
                            <div class="collapse navbar-collapse">
                                <ul class="navbar-nav mr-auto">
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">全国</a>
                                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item">省</a>
                                            <a class="dropdown-item">市</a>
                                            <a class="dropdown-item">区</a>
                                            <a class="dropdown-item">县</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ selSubjectData }}</a>
                                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item" v-on:click="selSubjec1">小学科学</a>
                                            <a class="dropdown-item" v-on:click="selSubjec2">小学心理健康</a>
                                            <a class="dropdown-item" v-on:click="selSubjec3">机器人创客</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">日</a>
                                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item">月</a>
                                            <a class="dropdown-item">学期</a>
                                        </div>
                                    </li>
                                    <li style="padding-left:20px;">
                                        <button class="btn btn-outline-primary my-2 my-sm-0" v-on:click="queryAllSchool">查询</button>
                                    </li>
                                </ul>
                                <form class="form-inline my-2 my-lg-0">
                                    <input class="form-control mr-sm-2" type="search" placeholder="搜索地区、学校" aria-label="Search">
                                    <button class="btn btn-outline-success my-2 my-sm-0">搜索</button>
                                </form>
                                <div style="padding-left:20px;">
                                    <button class="btn btn-outline-secondary" v-on:click="showMainPage">返回</button>
                                </div>
                            </div>
                        </nav>
                    </div>
            <div class="row">
                <!-- <div id="histogram" style="min-width:400px;height:400px"> -->
                <div class="left" id="histogram1"></div>
                <div class="right" id="piechart1"></div>
            </div>
            <hr />
            <div class="row">
                <div class="left" id="histogram2"></div>
                <div class="right" id="piechart2"></div>
            </div>
        </div>
        <script>
            $(function () {
                var divId = "histogram1";
                Highcharts.chart(divId, {
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: '茂名市官山学校'
                    },
                    subtitle: {
                        text: '数据来源: 优博创客（北京）科技有限公司'
                    },
                    xAxis: {
                        categories: ['PH 美好', 'PL 平和', 'NL 欠佳', 'NH 负面'],
                        title: {
                            text: null
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '人数总量(个)',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    tooltip: {
                        valueSuffix: ' 个人'
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true,
                                allowOverlap: true
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 100,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                        shadow: true
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        name: '2018年',
                        data: [10, 20, 30, 40]
                    }]
                });
            });
            /////////////////////////////
            $(function () {
                $('#piechart1').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: ''
                    },
                    tooltip: {
                        headerFormat: '{series.name}<br>',
                        pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    //去掉右下角链接/版权信息
                    credits: {
                        enabled: false
                    },
                    series: [{
                        type: 'pie',
                        name: '浏览器访问量占比',
                        data: [
                            ['平和', 10],
                            ['欠佳', 20],
                            ['美好', 30],
                            ['负面', 40]
                        ]
                    }]
                });
            });
            ////////////////////////////////
            $(function () {
                $('#histogram2').highcharts({
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: '茂名市官山学校'
                    },
                    subtitle: {
                        text: '数据来源: 优博创客（北京）科技有限公司'
                    },
                    xAxis: {
                        categories: ['PH 美好', 'PL 平和', 'NL 欠佳', 'NH 负面'],
                        title: {
                            text: null
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '人数总量(个)',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    tooltip: {
                        valueSuffix: ' 个人'
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true,
                                allowOverlap: true
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 100,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                        shadow: true
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        name: '2018年',
                        data: [
                            {'color':'#ED5555','y':10},
                            {'color':'#A0D468','y':20}, 
                            {'color':'#5D9CEC','y':30},
                            {'color':'#808080','y':40}]
                    }]
                });
            });
            /////////////////////////////
            $(function () {
                $('#piechart2').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: ''
                    },
                    tooltip: {
                        headerFormat: '{series.name}<br>',
                        pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: '浏览器访问量占比',
                        data: [
                            ['平和', 10],
                            ['欠佳', 20],
                            ['美好', 30],
                            ['负面', 40]
                        ]
                    }]
                });
            });
        </script>    
    </body>    
</html>
    